import { connect } from "dva";
import styles from "./index.less";
import icon_usercenter_line from "images/icon-usercenter-line@2x.png";
import icon_search from "images/icon-search.png";
import Pic from "./components/card_item";

import { NavBar, Icon, InputItem, Tabs, SearchBar } from "antd-mobile";
import router from "umi/router";

function App({ extensionList, dispatch }) {
  const { text, list } = extensionList;
  const tabs = [
    { title: "全部" },
    { title: "商品" },
    { title: "活动" },
    { title: "优惠券" }
  ];

  return (
    <div>
      <NavBar
        mode="light"
        icon={
          <Icon
            type="left"
            style={{
              fontSize: ".44rem"
            }}
          />
        }
        style={{
          color: "black"
        }}
        onLeftClick={() => router.push("mainpage")}
        rightContent={[
          <div className={styles.personal} key="personal">
            <img src={icon_usercenter_line} alt="" style={
              {
                width:'.6rem',height:'.6rem'
              }
            }/>
          </div>
        ]}
      >
        <div className={styles.search_bar}>
          <div className={styles.input}>
            <SearchBar
              className={styles.searchbar_style}
              placeholder="热搜关键词"
            />
          </div>
        </div>
      </NavBar>
      <div className={styles.divider} />
      <div className={styles.normal}>
        <Tabs
          tabBarActiveTextColor="#FD5527"
          tabBarUnderlineStyle={{
            width: "15%",
            marginLeft: ".38rem",
            borderColor: "#FD5527",
            backgroundColor: "#FD5527",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center"
          }}
          tabs={tabs}
          initialPage={0}
          animated={false}
          useOnPan={false}
        >
          <div className={styles.tab_style}>
            <Pic name="iponex 64G 黑色只售2888" />
            <Pic name="迎国庆砸金蛋中大奖" />
            <Pic name="国庆满300减100优惠券领取" />
            <Pic name="国庆满300减100优惠券领取" />
            <Pic name="国庆满300减100优惠券领取" />
          </div>
          <div className={styles.tab_style}>
            <Pic name="iponex 64G 黑色只售2888" />
          </div>
          <div className={styles.tab_style}>
            <Pic name="迎国庆砸金蛋中大奖" />
          </div>
          <div className={styles.tab_style}>
            <Pic name="国庆满300减100优惠券领取" />
            <Pic name="国庆满300减100优惠券领取" />
            <Pic name="国庆满300减100优惠券领取" />
          </div>
        </Tabs>
      </div>
    </div>
  );
}
export default connect(({ extensionList }) => ({ extensionList }))(App);
